import React, { useEffect, useState, useRef } from 'react'
import Navbar from '../../components/navbar/navbar'
import List from '../../components/List/list'
import Map from '../../components/map/map'
import './index.scss'
import * as echarts from 'echarts';
import { ScrollBoard } from '@jiaminghi/data-view-react'
// 引入接口
import { getCartLeftTop, getCartLeftFoot, getCartRightTop, getCarRightFoot } from '../../api/index'

function index() {
  // 近三年就业人员去向
  const leftTop = useRef(null)
  const [option, setOption] = useState({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      textStyle: {
        color: 'white'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '2%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: 'category',
      data: ['湖北', '江苏', '浙江', '广西', '广东', '重庆', '天津', '上海']
    },
    series: [
      {
        type: 'bar',
        data: [98203, 23489, 29034, 104970, 131744, 630230, 104970, 23438]
      },
      {
        type: 'bar',
        data: [193205, 23438, 31000, 121594, 134141, 681807, 19325, 18203]
      },
      {
        type: 'bar',
        data: [19325, 23438, 310000, 121594, 134141, 508107, 104970, 134141]
      }
    ]
  })
  const leftFoot = useRef(null)
  //工作状态
  const [option1, setOption1] = useState({
    legend: {
      textStyle: {
        color: 'white'
      }
    },

    series: [
      {
        type: 'pie',
        radius: [30, 110],
        center: ['50%', '50%'],
        roseType: 'area',

        data: [
          { value: 40, name: 'rose 1' },
          { value: 38, name: 'rose 2' },
          { value: 32, name: 'rose 3' },
          { value: 30, name: 'rose 4' },
          { value: 28, name: 'rose 5' },
          { value: 26, name: 'rose 6' },
          { value: 22, name: 'rose 7' },
          { value: 18, name: 'rose 8' }
        ]
      }
    ]
  })
  const types = [
    {
      id: 1,
      name: '未就业'
    },
    {
      id: 2,
      name: '返校重听'
    },
    {
      id: 3,
      name: '已就业'
    },
    {
      id: 5,
      name: '返校未就业'
    }
  ]
  // 毕业生流向城市
  const rightTop = useRef(null)
  const [option2, setOption2] = useState({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      textStyle: {
        color: 'white'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'value'
      }
    ],
    yAxis: [
      {
        type: 'category',
        axisTick: {
          show: false
        },
        data: ['天津', '重庆', '江苏', '广东', '浙江', '上海', '北京']
      }
    ],
    series: [
      {
        type: 'bar',
        label: {
          show: false,
          position: 'inside'
        },
        emphasis: {
          focus: 'series'
        },
        data: [200, 170, 240, 244, 200, 220, 210]
      },
    ]
  })


  //薪资分布
  const rightFoot = useRef(null)
  const [option3, setOption3] = useState({
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c}%'
    },

    legend: {
      icon: "circle",
      data: ["30K+", "30K~30K", "30K~30K", "30K~30K", "30K-"],
      textStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        name: 'Funnel',
        type: 'funnel',
        left: '10%',
        top: 60,
        bottom: 60,
        width: '80%',
        min: 0,
        max: 50,
        minSize: '0%',
        maxSize: '100%',
        sort: 'descending',
        gap: 2,
        label: {
          show: true,
          // position: 'inside'
        },
        labelLine: {
          length: 10,
          lineStyle: {
            width: 1,
            type: 'solid'
          }
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
        emphasis: {
          label: {
            fontSize: 20
          }
        },
        data: [
          { value: 60, name: 'Visit' },
          { value: 40, name: 'Inquiry' },
          { value: 20, name: 'Order' },
          { value: 80, name: 'Click' },
          { value: 100, name: 'Show' }
        ]
      }
    ]
  })

  // 中间内容
  const config = {
    header: ['城市', '就职企业', '岗位', '薪资'],
    data: [
      ['上海', '百度', '前端开发工程师', '10k'],
      ['北京 ', '新浪', '前端开发工程师', '12k'],
      ['广州', '哔哩哔哩', '前端开发工程师', '14k'],
      ['深圳', '字节跳动', '前端开发工程师', '16k'],
      ['天津', '腾讯', '前端开发工程师', '18k'],
      ['重庆', '芒果', '前端开发工程师', '20k'],
      ['成都', '爱奇艺', '前端开发工程师', '9k'],
      ['成都', '优酷', '前端开发工程师', '11k'],
      ['成都', '谷歌', '前端开发工程师', '13k'],
      ['成都', 'IE', '前端开发工程师', '15k']
    ],
    index: true,
    columnWidth: [50],
    align: ['center']
  }


  useEffect(() => {
    // 近三年
    getCartLeftTop().then(res => {
      console.log('近三年', res.data.data.result);
      var myChart = echarts.init(leftTop.current);
      myChart.setOption(option);
    })

    // 工作状态
    getCartLeftFoot({ gradYear: 2023 }).then(res => {
      console.log('工作状态', res);
      option1.series[0].data = res.data.data.result.map((item: any) => {
        return {
          value: item.total,
          name: types.find((i) => i.id == item.status)?.name
        }
      })
      setOption1({
        ...option1,
      })
      var myChart = echarts.init(leftFoot.current);
      myChart.setOption(option1);
    })
    //流向城市
    getCartRightTop({ gradYear: 2023 }).then(res => {
      console.log('流向城市', res);
      var myChart = echarts.init(rightTop.current);
      myChart.setOption(option2);
    })
    //薪资分布
    getCarRightFoot({ gradYear: '2023' }).then(res => {
      console.log('薪资分布', res.data.data.result);
      let arr = res.data.data.result;
      let arr1: any[] = [];
      let arr2: any[] = [];
      let arr3: any[] = [];
      let arr4: any[] = [];
      let arr5: any[] = [];
      let newArr = arr.map((item: any) => {
        if (item.salary > 10000 && item.salary < 15000) {
          arr1.push(item.total);
        } else if (item.salary > 15000 && item.salary < 20000) {
          arr2.push(item.total);
        } else if (item.salary > 20000 && item.salary < 30000) {
          arr3.push(item.total);
        } else if (item.salary > 30000) {
          arr4.push(item.total);
        } else if (item.salary < 10000) {
          arr5.push(item.total);
        }
      });


      option3.series[0].data = [
        { value: arr5.reduce((a, b) => a + b), name: "10k-" },
        { value: arr1.reduce((a, b) => a + b), name: "10K~15K" },
        { value: arr2.reduce((a, b) => a + b), name: "15K~20K" },
        { value: arr3.reduce((a, b) => a + b), name: "20K~30K" },
        { value: arr4.reduce((a, b) => a + b), name: "30K+" },
      ]
      setOption3(JSON.parse(JSON.stringify(option3)))
      var myChart = echarts.init(rightFoot.current);
      myChart.setOption(option3);
    })
    // 中间内容

  }, [])

  return (
    <div className='box1'>

      <div className="left">
        <div className="left_top">
          <List title='近三年毕业人员去向'></List>
          <img src='src/assets/image/Group 34.png' alt="" />
          <div className="left_one" ref={leftTop}>

          </div>
        </div>
        <div className="left_foot">
          <List title='毕业生工作状态'></List>
          <div className="left_two" ref={leftFoot}></div>
        </div>
      </div>
      <div className="center">
        <Map></Map>
        <div className='ScrollBoard'>
          <ScrollBoard config={config} style={{ width: '400px', height: '220px' }} />
        </div>
        <Navbar></Navbar>
      </div>
      <div className="right">
        <div className="right_top">
          <List title='毕业生流向城市'></List>
          <div className='imgItem'>
            <img src='src/assets/image/编组 9.png' alt="" />
            <img src='src/assets/image/编组 10.png' alt="" />
            <img src='src/assets/image/编组 14.png' alt="" />
          </div>
          <div className="right_one" ref={rightTop}></div>

        </div>
        <div className="right_foot">
          <List title='毕业生薪资分布'></List>
          <div className="right_two" ref={rightFoot}></div>
        </div>
      </div>
      <div className="top"></div>
    </div>
  )
}

export default index